<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>投票记录查看</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>

</head>
<body class="bg-gray-50 min-h-screen flex">
<!-- 侧边导航栏 -->
<div class="w-64 bg-indigo-800 text-white flex-shrink-0 hidden md:block">
    <div class="p-4 border-b border-indigo-700">
        <h1 class="text-xl font-bold">书籍投票系统</h1>
        <p class="text-sm text-indigo-300">管理员控制台</p>
    </div>
    <nav class="p-4 space-y-2">
        <a href="admin" class="block px-4 py-2 bg-indigo-700 rounded flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
            </svg>
            书籍管理
        </a>
        <a href="#" class="block px-4 py-2 hover:bg-indigo-700 rounded flex items-center gap-2 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
            </svg>
            投票记录
        </a>
        <a href="logout" class="block px-4 py-2 hover:bg-indigo-700 rounded flex items-center gap-2 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd" />
            </svg>
            退出登录
        </a>
    </nav>
</div>

<!-- 主内容区 -->
<div class="flex-1 flex flex-col overflow-hidden">
    <!-- 顶部导航-->
    <header class="bg-white border-b md:hidden">
        <div class="px-4 py-3 flex justify-between items-center">
            <h1 class="text-lg font-semibold">书籍投票系统</h1>
            <button class="p-1 rounded-md text-gray-500 hover:text-gray-600 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </div>
    </header>

    <!-- 内容区 -->
    <main class="flex-1 overflow-y-auto p-4 md:p-6">

        <!-- 主标题和操作按钮 -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-4 sm:mb-0">投票记录</h2>
        </div>

        <c:if test="${not empty records}">


            <div class="bg-white rounded-lg shadow overflow-hidden">
                <div class="grid grid-cols-12 bg-gray-100 p-3 font-medium text-gray-700">
                    <div class="col-span-4 md:col-span-5">IP地址</div>
                    <div class="col-span-3 md:col-span-2 text-center">投票书籍</div>
                </div>

                <c:forEach items="${records}" var="record">
                    <div class="grid grid-cols-12 p-3 border-b hover:bg-gray-50 items-center">
                        <div class="col-span-4 md:col-span-5 font-medium">${record.ip}</div>
                        <div class="col-span-3 md:col-span-2 text-gray-600 text-center">
                            <c:set var="book" value="${booksMap[record.bookId]}" />
                            <c:if test="${not empty book}">
                                ${book.title} (ID: ${record.bookId})
                            </c:if>
                            <c:if test="${empty book}">
                                [已删除的书籍] (ID: ${record.bookId})
                            </c:if>
                        </div>

                    </div>
                </c:forEach>
            </div>
        </c:if>

        <c:if test="${empty records}">
            <p>暂无投票记录</p>
        </c:if>

    </main>
</div>


<%--<h1>管理员控制台</h1>--%>

<%--<div class="actions">--%>
<%--    <a class="btn" href="admin">返回管理控制台</a>--%>
<%--</div>--%>

<%--<h2 style="text-align: left">投票记录查看</h2>--%>


<%--<c:if test="${not empty records}">--%>
<%--    <table>--%>
<%--        <tr>--%>
<%--            <th>IP地址</th>--%>
<%--            <th>投票书籍</th>--%>
<%--        </tr>--%>
<%--        <c:forEach items="${records}" var="record">--%>
<%--            <tr>--%>
<%--                <td>${record.ip}</td>--%>
<%--                <td>--%>
<%--                    <c:set var="book" value="${booksMap[record.bookId]}" />--%>
<%--                    <c:if test="${not empty book}">--%>
<%--                        ${book.title} (ID: ${record.bookId})--%>
<%--                    </c:if>--%>
<%--                    <c:if test="${empty book}">--%>
<%--                        [已删除的书籍] (ID: ${record.bookId})--%>
<%--                    </c:if>--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--        </c:forEach>--%>
<%--    </table>--%>
<%--</c:if>--%>

<%--<c:if test="${empty records}">--%>
<%--    <p>暂无投票记录</p>--%>
<%--</c:if>--%>
</body>
</html>